<template>
  <div class="userContainer">
    <div class="option">
      <el-button type="primary" size="small" @click="Refresh()">刷新</el-button>
      <div class="search">
        <!-- 根据订单状态搜索 -->
        认证状态:
        <el-select v-model="cerStatus" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <!-- 搜索 -->
        <el-button type="primary" @click="getList()">搜索</el-button>
      </div>
    </div>
    <el-table :data="List" border style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="用户昵称:">
              <span>{{ props.row.nikename }}</span>
            </el-form-item>

            <el-form-item label="用户头像:">
              <img :src="`http://www.jfqiandai.com/file${props.row.pic}`" style="width:40px">
            </el-form-item>

            <el-form-item label="号码注册地区:">
              <span>{{ props.row.region }}</span>
            </el-form-item>

            <el-form-item label="代理一级比例:">
              <span>{{ props.row.oneLevelRatio }}</span>
            </el-form-item>

            <el-form-item label="代理二级比例:">
              <span>{{ props.row.twoLevelRatio }}</span>
            </el-form-item>

            <el-form-item label="代理三级比例:">
              <span>{{ props.row.threeLevelRatio }}</span>
            </el-form-item>

            <el-form-item label="密码盐:">
              <span>{{ props.row.salt }}</span>
            </el-form-item>
            <el-form-item label="邀请码追溯:">
              <span>{{ props.row.userPids }}</span>
            </el-form-item>
            <el-form-item label="创建时间:">
              <span>{{ props.row.createTime }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="index" label="序号"></el-table-column>
      <el-table-column prop="phone" label="用户手机号码"></el-table-column>
      <el-table-column prop="createtype" label="用户注册类型"></el-table-column>
      <el-table-column prop="commissionMoney" label="用户总佣金"></el-table-column>
      <el-table-column prop="money" label="用户总金额"></el-table-column>
      <el-table-column prop="pid" label="个人专属邀请码"></el-table-column>
      <el-table-column prop="alipayAccount" label="支付宝账户"></el-table-column>
      <el-table-column prop="alipayName" label="支付宝用户名"></el-table-column>
      <el-table-column prop="userPid" label="邀请人的邀请码"></el-table-column>
      <el-table-column prop="secretKey" label="代理登陆秘钥"></el-table-column>
      <el-table-column label="代理认证状态">
        <template slot-scope="scope">
          <el-button
            type="warning"
            size="small"
            v-show="scope.row.certStatus == 0"
            @click="goCert(scope.row)"
          >未认证</el-button>
          <el-button type="success" size="small" v-show="scope.row.certStatus == 1">已认证</el-button>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <!-- <el-button @click="handleClick(scope.row)" type="primary" size="small">查看</el-button> -->
          <!-- <el-button @click="EditClick()" type="primary" plain size="small">编辑</el-button> -->
          <el-button @click="DeleteClick(scope.row)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="paginat">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage4"
        :page-size="10"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>

    <!-- 弹框 -->
    <el-dialog title="代理认证" :visible.sync="dialogVisible" width="30%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="代理一级比例" prop="oneLevelRatio">
          <el-input v-model.number="ruleForm.oneLevelRatio"></el-input>
          <span>%</span>
        </el-form-item>
        <el-form-item label="代理二级比例" prop="twoLevelRatio">
          <el-input v-model.number="ruleForm.twoLevelRatio"></el-input>
          <span>%</span>
        </el-form-item>
        <el-form-item label="代理三级比例" prop="threeLevelRatio">
          <el-input v-model.number="ruleForm.threeLevelRatio"></el-input>
          <span>%</span>
        </el-form-item>
        <div style="text-align:right;margin-right: 7%;">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="goCertOk('ruleForm')">确 定</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>


<script>
export default {
  data() {
    var checkRatio = (rule, value, callback) => {
      console.log(value);
      if (!value) {
        return callback(new Error("输入值不能为空"));
      }
      setTimeout(() => {
        if (value < 0 || value > 100) {
          callback(new Error("输入值必须在0-100之间"));
        } else {
          callback();
        }
      }, 1000);
    };
    return {
      val: 1, //当前多少页
      currentPage4: 1,
      total: 0,
      List: [],
      dialogVisible: false,
      useriId: 0,
      options: [
        {
          value: "",
          label: "全部"
        },
        {
          value: 0,
          label: "未认证"
        },
        {
          value: 1,
          label: "已认证"
        }
      ],
      cerStatus: "", //认证状态
      // 表单校验
      ruleForm: {
        oneLevelRatio: "",
        twoLevelRatio: "",
        threeLevelRatio: ""
      },
      rules: {
        oneLevelRatio: [
          { required: true, validator: checkRatio, trigger: "blur" }
        ],
        twoLevelRatio: [
          { required: true, validator: checkRatio, trigger: "blur" }
        ],
        threeLevelRatio: [
          { required: true, validator: checkRatio, trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.getList();
    // 兑换教程 - 兑换教程列表/兑换教程文本 文本的新增
    // 新增/编辑  下拉框   传carid
  },
  methods: {
    //去认证
    goCert(row) {
      this.dialogVisible = true;
      this.useriId = row.id;
      this.oneLevelRatio = "";
      this.twoLevelRatio = "";
      this.threeLevelRatio = "";
    },
    //确定
    goCertOk(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let url = "/user/editAgent";
          let params = {
            useriId: this.useriId,
            oneLevelRatio: this.ruleForm.oneLevelRatio,
            twoLevelRatio: this.ruleForm.twoLevelRatio,
            threeLevelRatio: this.ruleForm.twoLevelRatio
          };
          this.httpPost(url, params, res => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "认证通过"
              });
              this.dialogVisible = false;
              this.getList();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //分页
    handleCurrentChange(val) {
      this.val = val;
      this.getList();
      console.log(`当前页: ${val}`);
    },
    //新增
    addUser() {
      this.$router.push("/addUser");
    },
    //刷新
    Refresh() {
      this.getList();
    },
    //查看
    // handleClick(row) {
    //   this.$router.push("/checkUser?id=" + row.id);
    // },
    //编辑
    EditClick() {},
    //删除
    DeleteClick(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let url = "/user/editOne";
          let params = {
            id: row.id,
            status: 1
          };
          this.httpPost(url, params, res => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功"
              });
              this.dialogVisible = false;
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //获取数据
    getList() {
      let url = "/user/getList";
      let params = {
        certStatus: this.cerStatus,
        pageNum: this.val,
        pageSize: 10
      };
      this.httpPost(url, params, res => {
        if (res.code == 200) {
          this.List = res.data.list;
          this.total = res.data.total;
          this.List.forEach((element, i) => {
            this.List[i].index = (this.val - 1) * 10 + i + 1;
            this.List[i].createtype =
              this.List[i].createtype === 1 ? "用户注册" : "代理创建";
          });
        } else {
          console.log("查询失败");
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.userContainer {
  .option {
    padding: 10px;
    .search {
      float: right;
      padding: 10px;
    }
  }
  .ratioTil {
    display: block;
    padding: 10px 0;
  }
  .row {
    input {
      width: 90%;
      height: 30px;
      margin-bottom: 10px;
      margin-right: 10px;
    }
  }
}
</style>

<style>
.userContainer .el-button--success {
  margin-left: 0px !important;
}
.userContainer .el-input {
  width: 90%;
}
.userContainer .demo-table-expand .el-form-item{
  width:30%;
}
</style>

